import React from 'react';


import classnames from 'classnames';
//component
import ReModal from '../ReModal'

import './index.less';


export default class view extends React.Component {
    static propTypes = {
        open: React.PropTypes.bool,
        onSelect: React.PropTypes.func,
        m: React.PropTypes.number,
        cm: React.PropTypes.number
    };

    static defaultProps = {
        m: 3,
        cm: 0,
        onSelect: () => {}
    };


    constructor(props, context) {

        super(props, context);


        // init state;
        this.state = {
            m: props.m,
            cm: props.cm
        };

        this.list = [{
            type: 'm',
            options: Array(11).fill()
        }, {
            type: 'cm',
            options: Array(100).fill()
        }];
    }

    componentWillMount() {
        this._isMounted = true;
    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    handleSelect(e, type) {
        this.setState({ [type]: +e.target.value }, () => {
            this.props.onSelect && this.props.onSelect(e, { m: this.state.m, cm: this.state.cm });
        });
    }

    render() {

        const classNames = classnames({
            'orin-sw-reselectdialog-root': true,
            [this.props.className]: this.props.className ? true : false
        });

        return (
            <div className={classNames} >
                <div className="select-box">
                    <ReModal open={this.props.open}>
                        <h3 className="select-title">设置高度</h3>
                        <div className="select-content">
                            {this.list.map((item, i) => {
                                return (
                                    <select
                                        size={4}
                                        name={item.type}
                                        key={item.type}
                                        defaultValue={this.state[item.type]}
                                        onChange={e => this.handleSelect(e, item.type)}
                                        >
                                       {item.options.map((v,i) => <option key={i} value={i} > {i}{item.type} </option>)}
                                    </select>
                                )
                            })}
                        </div>

                    </ReModal>
                </div>

            </div>
        );
    }
}
